<template>
	<!-- 客户群群发 -->
	<view class="home">
		<!-- <view class="head">
			<navigator class="goBack" open-type="navigateBack">
				<u-icon name="arrow-left" color="#444" size="28" style="margin-right: 10rpx;"></u-icon>
				新建客户群群发
			</navigator>
		</view> -->
		<view class="Item">
			<view class="title">
				<titleRow  :titleName="titleName1">
					
				</titleRow>
			</view>
			<view class="tips">
				<view class="rowText">
					客户群群发每个客户每个月仅可收到4条客户群群发消息
				</view>
				<view class="rowText">
					若管理员在小路后台创建了客户群群发也会占用群发机会
				</view>
				<view class="rowText">
					个人群发每天可给客户发送一条群发消息 <text style="color: #2772FE; margin-left: 15rpx;">查看如何发送</text>
				</view>
			</view>
			<view class="bottomInput">
				<u-form :model="form" ref="uForm" label-position="top">
							<u-form-item class="form-item" label="群发名称：" prop="name">
									<u-input  v-model="form.name" border placeholder="请输入群发名称"/>
							</u-form-item>
				</u-form>
			</view>
			
		</view>
		<view class="Item">
				<view class="title">
					<titleRow  :titleName="titleName3"></titleRow>
				</view>
				<view class="content" >
					<view class="label">
						群发内容：
					</view>
					<contentAddAttachment></contentAddAttachment>
				</view>
				
				<view class="btns">
					<view class="tips" v-show="tipsVisiable">
						创建成功后你将会在【企业微信】收到一条【客
						户群】推送，确认发送后客户群才会收到群发消
						息哦！
						<text @click="tipsVisiable=false">不再提醒</text>
					</view>
					<view class="cancle">
						取消
					</view>
					<view class="submit" @click="submit()">
						创建群发
					</view>
				</view>
		</view>
		
		
	</view>
</template>

<script>
	import titleRow from '@/component/titleRow/titleRow.vue'
	import dropDownWindow from '@/component/dropDownWindow/dropDownWindow'
	import contentAddAttachment from '@/component/contentAddAttachment/contentAddAttachment.vue'
	export default {
		data() {
			return {
				titleName1:'向我的客户群发消息',
				titleName2:'客户筛选',
				titleName3:'群发消息设置',
				form:{
					name:'',
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入群发名称', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
								
				},
				tipsVisiable:false,
			};
		},
		components:{
			titleRow,dropDownWindow,contentAddAttachment
		},
		methods:{
			startTimeChange(e){
				console.log(e);
			},
			endTimeChange(e){
				console.log(e);
			},
			submit(){
				this.tipsVisiable = true
			},
		},
		onReady() {
				this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-date-x .uni-date-single{
		position: relative;
		padding-right: 20rpx;
	}
	/deep/ .uni-date__icon-logo{
		position: absolute;
		right: 5%;
		top: 25%;
	}
	/deep/ .u-border-bottom:after{
		    border-bottom-width: 0px;
	}
	
	/deep/ .u-form-item--left__content__label{
		padding-left: 10rpx;
		&::before{
			content: '*';
			color: #FA3534;
		}
	}
	
	.home {
		 background-color: #f9f9f9;
  		.head {
			  display: flex;
			  justify-content: space-between;
			  height: 90rpx;
			  align-items: center;
			  padding: 0 30rpx;
			  background-color: #fff;
    		.goBack {
				color: #444444;
    		}
    	}
		
		
		
  		.Item {
			width: 100%;
			background-color: #fff;
			margin-bottom: 30rpx;
			padding-bottom: 20rpx;
    		.title {
				padding-left: 20rpx;
				titlerow {
					
				}
    		}

			.tips{
				// width: 100%;
				margin: 20rpx;
				padding: 30rpx;
				background-color: #F7FBFF;
				// background-color: pink;
				.rowText{
					position: relative;
					font-size: 27rpx;
					// padding: 10rpx 0;
					padding-bottom: 10rpx;
					&:nth-child(3){
						padding-bottom: 0rpx;
					}
					&:nth-child(2):before{
						top: 20%;
					}
					&:before{
						content: '';
						position: absolute;
						top: 40%;
						left: -2%;
						width: 6rpx;
						height: 6rpx;
						background-color: #95CBF2;
					}
				}
			}
			
			.bottomInput{
				padding: 0 30rpx;
				height: 230rpx;
				width: 100%;
				.form-item{
					margin-bottom: 20rpx;
					width: 100vw;
					// background-color: red;
					// height: 240rpx;
					display: flex;
					// justify-content: center;
					flex-wrap: wrap;
					.label{
						display: flex;
						color: #666666;
						align-items: center;
						// width: 100%;
						background-color: pink;
						.icon{
							display: flex;
							align-items: center;
							margin-left: 15rpx;
							image{
								width: 24rpx;
								height: 24rpx;
							}
							text{
								margin-left: 10rpx;
							}
						}
					}
					.input{
						margin-top: 20rpx;
						width: 100%;
						display: flex;
						align-items: center;
						
					}
				}
			
				.examine{
					margin-top: 80rpx;
					display: flex;
					align-items: center;
					image{
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
					
				}
			}
    		.content {
				background-color: #fff;
				display: flex;
				// align-items: center;
				flex-direction: column;
				height: 520rpx;
				width: 95%;
				margin: auto;
				.label{
					margin: 10rpx 0;
					color: #595959;
					font-size: 26rpx;
				}
    		}
  		
			.btns{
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding: 0rpx 30rpx;
				margin: 40rpx 0 30rpx;
				position: relative;
				.tips{
					height: 173rpx;
					width: 642rpx;
					background-color: #fff;
					position: absolute;
					top: -260%;
					left: 0%;
					box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
					text{
						position: absolute;
						right: 5%;
						bottom: 4%;
						color: #2772FE;
					}
					&::after{
						content: '';
						position: absolute;
						bottom: -24%;
						right: 13%;
						width: 0;
						height: 0;
						border-width: 10px 10px 10px;
						border-style: solid;
						border-color: #F1F1F1 transparent transparent ;
						opacity: 0.9;
					}
				}
				.cancle{
					height: 84rpx;
					width: 47%;
					background-color: #fff;
					border: 1px solid #D9D9D8;
					display: grid;
					color: #595959;
					place-items: center;
					border-radius: 8rpx;
				}
				.submit{
					height: 84rpx;
					width: 47%;
					display: grid;
					place-items: center;
					color: #fff;
					background-color: #2772FE;
					border-radius: 8rpx;
				}
			}
		}
	
		
		
	}
</style>
